<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2022-02-09 10:45:47
 * @LastEditTime: 2022-02-10 14:00:58
 * @LastEditors: xuechengwu
-->
<template>
  <div class="event-editor-box">
        <div class="event-editor-select">
            <el-select
                v-model="event"
                placeholder="请选择事件"
                size="mini"
                >
                <el-option
                    v-for="(item) in eventsList"
                    :key="item.key"
                    :label="item.name"
                    :value="item.key"
                    >
                </el-option>
            </el-select>
            <el-button type="" size="small" @click="newEvent">新增</el-button>
        </div>
        <div class="event-list">
            <div
                v-for="(item, index) in events"
                :key="item.key"
                class="event-list-item"
            >
                <div class="xue-event-name">{{item.label}}</div>
                <div class="xue-event-input">
                    <el-select
                        :value="item.key"
                        @change="changeEvent($event, item)"
                        size="mini"
                    >
                      <el-option
                        v-for="option in item.eventOption"
                        :key="option.key"
                        :label="option.name"
                        :value="option.key"
                        ></el-option>
                    </el-select>
                </div>
                <div v-if="item.key === 'SYS_PAGE_DATA_EDIT'">
                    <div @click="showLinkDialog(item)">选择关联数据</div>
                </div>
                <div v-if="item.key === 'SYS_ROUTER'">
                    <el-select
                        size="mini"
                        :value="item.params.direct"
                        placeholder="请选择跳转页面"
                        @change="updateEventRouter($event, index)"
                    >
                        <el-option
                            v-for="page in allPages"
                            :label="page.name"
                            :key="page.mark"
                            :value="page.mark"
                        ></el-option>
                    </el-select>
                </div>
                <div v-if="item.key === 'SYS_REQUEST'">
                    <el-select
                        size="mini"
                        :value="item.params.request"
                        placeholder="请选择请求的接口"
                        @change="updateEventRequest($event, index)"
                    >
                      <el-option
                        v-for="intf in allInterface"
                        :key="intf.key"
                        :label="intf.name"
                        :value="intf.key"
                        ></el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <el-dialog
            title="编辑关联数据"
            :visible.sync="linkDataShow"
            lock-scroll
            width="480px"
            modal
            show-close
            >
            <el-button @click="addLink" size="mini">新增</el-button>
            <el-row
                :gutter="8"
                v-for="(link, index) in (currentEditEvent.params.links || [])"
                :key="link.key"
            >
                <el-col :span="8" class="sys-link-name">
                    <el-select
                        size="mini"
                        :value="link.key"
                        @change="changeLinkKey($event, index)"
                    >
                        <el-option
                            v-for="pageData in pageDatas"
                            :key="pageData.key"
                            :label="pageData.name"
                            :value="pageData.key"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="8" class="sys-link-value">
                    <el-select
                        size="mini"
                        :value="link.type"
                        @change="changeLinkType($event, index)"
                    >
                        <el-option label="自定义" value="-1"></el-option>
                        <el-option label="当前事件取值" value="1"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="8" class="sys-link-other" v-if="link.type === '-1'">
                    <el-input
                        :value="link.value"
                        @input="changeEventLink($event, index)"
                        size="mini"
                    ></el-input>
                </el-col>
            </el-row>
            <div slot="footer">
                <el-button type="primary" @click="linkDataShow = false">取消</el-button>
                <el-button type="success" @click="onLinkDataOk">确认</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
import A5 from '../../A5';
import _ from 'lodash';
import Vue from 'vue';
export default {
    props: ['get', 'page', 'config', 'app'],
    inject: ['update'],
    data() {
        return {
            event: '',
            linkDataShow: false,
            currentEditEvent: { params: {} },
        };
    },
    computed: {
        pageDatas() {
            const { page } = this;
            const { datas = {} } = page;
            const dataKeys = Object.keys(datas);
            return dataKeys.map(vo => ({
                key: vo,
                name: datas[vo].name,
            }));
        },
        events() {
            const { config = {} } = this;
            const { eventsList = [] } = this;
            const { events = [] } = config;
            let list = [];
            for (let i = 0; i < events.length; i += 1) {
                const event = events[i];
                const targetEvent = eventsList.find(vo => vo.key === event.name);
                list.push({
                    ...event,
                    eventOption: [{
                        name: '无操作',
                        key: 'SYS_NONE'
                    }, {
                        name: '修改页面数据',
                        key: 'SYS_PAGE_DATA_EDIT',
                    }, {
                        name: '页面跳转',
                        key: 'SYS_ROUTER'
                    }, {
                        name: '请求接口',
                        key: 'SYS_REQUEST',
                    }].concat(targetEvent.funcs),
                });
            }
            return list;
        },
        eventsList() {
            const { config = {} } = this;
            const componentConfig = A5.getComponent(config.name);
            const { events = {} } = componentConfig.config;
            const eventsList = Object.keys(events).map(vo => ({
                name: events[vo].name,
                key: vo,
                funcs: events[vo].funcs,
            }));
            return eventsList;
        },
        allPages() {
            const { app = {} } = this;
            const { containers = [] } = app;
            console.log('containers===>', containers);
            return containers.map(vo => ({ name: vo.name, mark: vo.mark }));
        },
        allInterface() {
            const { page = {} } = this;
            return page.interfaces || [];
        }
    },
    methods: {
        newEvent() {
            const { event, eventsList = [] } = this;
            const ev = eventsList.find(vo => vo.key === event);
            const { events = [], mark } = this.config;
            const targetEvents = _.cloneDeep(events);
            const hasEvent = targetEvents.findIndex(vo => vo.name === event);
            if (hasEvent >= 0) {
                this.$message({
                    type: 'warning',
                    message: '当前事件已存在',
                });
            } else {
                targetEvents.push({
                    name: event,
                    label: ev.name,
                    key: 'NONE',
                    params: {},
                });
                this.update({
                    mark,
                    changes: [{
                        path: 'events',
                        value: targetEvents,
                    }],
                });
            }
        },
        changeEvent(val, event) {
            const { events = [], mark } = this.config;
            const targetEvents = _.cloneDeep(events);
            const eventIndex = targetEvents.findIndex(vo => vo.name === event.name);
            if (eventIndex >= 0) {
                targetEvents[eventIndex].key = val;
                this.update({
                    mark,
                    changes: [{
                        path: 'events',
                        value: targetEvents,
                    }],
                });
            }
        },
        addLink() {
            const { currentEditEvent, pageDatas = [] } = this;
            const { params = {} } = currentEditEvent; 
            const { links = [] } = params;
            let newParams = null;
            for (let i = 0; i < pageDatas.length; i += 1) {
                const linkIndex = links.findIndex(vo => vo.key === pageDatas[i].key);
                if (linkIndex < 0) {
                    newParams = pageDatas[i];
                }
            }
            if (newParams) {
                links.push({
                    key: newParams.key,
                    type: '-1',
                    value: '',
                });
                Vue.set(params, 'links', links);
            } else {
                this.$message({
                    type: 'warning',
                    message: '当前没有页面数据可以新增'
                });
            }
            
        },
        changeLinkKey(value, index) {
            const { currentEditEvent } = this;
            const { params = {} } = currentEditEvent; 
            const { links = [] } = params;
            const link = links.find(vo => vo.key === value);
            if (!link) {
                links[index].key = value;
            } else {
                this.$message({
                    type: 'warning',
                    message: '关联数据已存在'
                });
            }
        },
        changeLinkType(value, index) {
            const { currentEditEvent } = this;
            const { params = {} } = currentEditEvent; 
            const { links = [] } = params;
            links[index].type = value;
        },
        changeEventLink(value, index) {
            const { currentEditEvent } = this;
            const { params = {} } = currentEditEvent; 
            const { links = [] } = params;
            links[index].value = value;
        },
        showLinkDialog(event) {
            this.currentEditEvent = _.cloneDeep(event);
            this.linkDataShow = true;
        },
        onLinkDataOk() {
            const { currentEditEvent, events } = this;
            const eventIndex = events.findIndex(vo => vo.key === currentEditEvent.key);
            const { mark } = this.page;
            if (eventIndex >= 0) {
                this.update({
                    mark,
                    changes: [{
                        path: `events.${eventIndex}`,
                        value: currentEditEvent,
                    }],
                });
                this.linkDataShow = false;
            } else {
                this.$message({
                    type: 'warning',
                    message: '更新失败，请关闭后重试',
                });
            }
        },
        updateEventRouter(value, index) {
            const { mark } = this.page;
            const { events } = this;
            const event = _.cloneDeep(events[index]);
            event.params.direct = value;
            this.update({
                mark,
                changes: [{
                    path: `events.${index}`,
                    value: event,
                }]
            });
        },
        updateEventRequest(value, index) {
            const { mark } = this.page;
            const { events } = this;
            const event = _.cloneDeep(events[index]);
            event.params.request = value;
            this.update({
                mark,
                changes: [{
                    path: `events.${index}`,
                    value: event,
                }]
            });
        }
    }
}
</script>

<style>

</style>